<template>
  <div>
    <el-dropdown
        size="small"
        placement="right"
        trigger="click"
        @command="batchOperate"
        style="margin-left: 10px;">

      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item >复制到</el-dropdown-item>
        <el-dropdown-item >移动到</el-dropdown-item>
        <el-dropdown-item >重命名</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
      <router-link to="/home">若文件丢失，请重新建立该文件夹</router-link>

    <uploader :options="options" class="uploader-example">
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <p>Drop files here to upload or</p>
        <uploader-btn>select files</uploader-btn>
        <uploader-btn :attrs="attrs">select images</uploader-btn>
        <uploader-btn :directory="true">select folder</uploader-btn>
      </uploader-drop>
      <uploader-list></uploader-list>

    </uploader>

    <table  class="table table-bordered table-hover">
      <thead>

      </thead>
      <tbody id="floder">


      </tbody>

      <thead>

      </thead>
      <tbody id="zuoye">


      </tbody>
    </table>



  </div>

</template>

<script>

import $ from 'jquery';
var fname=window.sessionStorage.getItem("fname");
var user=window.sessionStorage.getItem("username");
console.log(fname);
console.log(name);
export default {

  data() {
    return {

      options: {
        // 可通过 https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js 示例启动服务
        target: "http://localhost:9075/upload?user=" + user + "&fname=" + fname,





        testChunks: false
      },

      attrs: {
        accept: 'image/*'
      }
    }
  },
  created() {

    this.docList();
    this.picList();


  },

  methods: {

    async picList() {

      var fname = window.sessionStorage.getItem("fname");
      var user = window.sessionStorage.getItem("username");
      $.ajax({

        url: "http://localhost:9075/pictu?user=" + user + "&fname=" + fname,
        dataType: "json",
        success: function (resp) {


          $("#zuoye").empty();
          $.each(resp, function (i, n) {
w

            $("#zuoye").append("<tr><td class='m'><img class='a' width='150px' height='100px' src='http://localhost:9075/"+n.ctime+"'><a href='http://localhost:9075/"+n.ctime+"'>"+n.ctime+"</a></td><td class='m'>"+n.pname+"</td><td><el-button type='text' size='medium'><i class='el-icon-download'></i></el-button></td><td>"+n.min+"</td></td><td><el-button type='text' size='medium'><i class='el-icon-delete'></i></el-button></td><td><el-button type=\"text\" size=\"medium\"><i class=\"el-icon-more-outline\"></i></el-button></td></tr>");
          })
        }

      })
    },
    async docList() {

      var fname=window.sessionStorage.getItem("fname");
      var user=window.sessionStorage.getItem("username");
      $.ajax({

        url: "http://localhost:9075/foc?user="+user+"&fname="+fname,
        dataType: "json",
        success: function (resp) {


          $("#floder").empty();
          $.each(resp, function (i, n) {


            $("#floder").append("<tr><td class='m'><a class='a' href='http://localhost:9075/" + n.filename + "'>" + n.filename + "</a></td><td>" + n.ctime + "</td><td>" + n.min + "</td></tr>")
          })
        }

      })
    }
  }



}

</script>

<style scoped>

</style>
